<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <t-card flat bordered style="max-width: 250px">
        <t-card-section>
          <div class="text-h6">Our Changing Planet</div>
          <div class="text-subtitle2">by John Doe</div>
        </t-card-section>

        <t-separator />

        <t-card-actions>
          <t-btn label="Share" color="primary" flat />
          <t-btn label="Comment" color="secondary" flat />
        </t-card-actions>
      </t-card>

      <t-list
        class="bg-grey-9 text-white shadow-2 rounded-borders"
        style="max-width: 250px; width: 100%"
      >
        <t-item>
          <t-item-section avatar>
            <t-avatar>
              <img src="https://cdn.quasar.dev/img/avatar6.jpg" />
            </t-avatar>
          </t-item-section>
          <t-item-section>Jane</t-item-section>
        </t-item>

        <t-separator dark />

        <t-item>
          <t-item-section avatar>
            <t-avatar>
              <img src="https://cdn.quasar.dev/img/avatar3.jpg" />
            </t-avatar>
          </t-item-section>
          <t-item-section>Lily</t-item-section>
        </t-item>

        <t-item>
          <t-item-section avatar>
            <t-avatar>
              <img src="https://cdn.quasar.dev/img/avatar5.jpg" />
            </t-avatar>
          </t-item-section>
          <t-item-section>Mary</t-item-section>
        </t-item>
      </t-list>
    </div>
  </div>
</template>
